{% extends "volunteer_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "我的报名信息" %}</title>
{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bootstrap-3.3.4-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
    rel="stylesheet" />
{{ block.super }}
{% endblock %}

{% block bar %}
<!-- 侧边导航栏start -->
<div class="bar">
    <div class="sidebar">
        <ul>
            <li>
                <a href="{{ SITE_URL }}studentHome/"><span class="iconfont icon-zhuye1"></span>主页</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}myApply/"><span class="iconfont icon-wode-wode"></span>我的报名</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}"><span class="iconfont icon-jinru"></span>退出登录</a>
            </li>
        </ul>
    </div>
    <a class="btn">
        <span class="iconfont icon-zhedie"></span>
    </a>
</div>
<!-- 侧边导航栏结束 -->
{% endblock %}
{% block content %}
<div class="content">
    <div class="part3">
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg1.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>志愿者，选择温暖这座城<br>
                    <span>你的样子就是中国的样子</span>
                </h2>
            </div>
        </div>
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg2.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>逆行不独行，隔离不分离<br>
                    <span>抗疫无国界，爱心零时差</span>
                </h2>
            </div>

        </div>
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg3.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>众志成城，人山人海<br>
                    <span>最美志愿者，平淡的日子里泛着光</span>
                </h2>
            </div>

        </div>
    </div>

    <div style="clear: both;"></div>
    <!-- 我的报名信息 -->
    <div class="page-content " style="width:75%; background: #faefff; color: #888;">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab" style="background: #faefff;">
                <a role="button" data-toggle="collapse" href="#panel-content1" class="panel-icon panel-spread"
                    aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content1" class="panel-title" style="color: #888;"
                    aria-expanded="true">我的报名信息</h3>
            </div>
            <div id="panel-content1" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                <table class="bk-table bk-table-header-bordered" id="apply" style="background: #faefff; color: #888;">
                    <thead>
                        <tr>
                            <th>报名活动</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>学校</th>
                            <th>年级</th>
                            <th>报名时间</th>
                            <th>操作</th>
                            <th>状态</th>
                            <th>通知</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>

<!-- 模态框( applyModal )  报名活动-->
<div class="modal fade" id="applyModal" tabindex="-1" role="dialog" aria-labelledby="applyModalLabel" aria-hidden="true"
    data-backdrop="static">
    <div class="modal-dialog" style="width: 680px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="applyModalLabel" style="color: #000000;">填写您的报名信息</h4>
            </div>
            <form id="validate_form_apply" method="post">
                <!-- style="display: block;margin-top: 0em;" -->
                <!-- 加csrf令牌 -->
                {% csrf_token %}
                <div class="bk-form" style="width:600px; padding: 10px" id="validate_form_apply">
                    <input type="hidden" id="apply_id" name="apply_id" class="bk-form-input">
                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">报名活动</label>

                        <div class="plugin3_demo" id="plugin3_demo3" style="display:inline-block;">
                            <!-- select2 通过ajax start -->
                            <div class="select2-container select2_box select2-container-active" id="s2id_autogen5"
                                style="width: 430px; height: 36px;color: #000000;">
                                <a href="javascript:void(0)" class="select2-choice" tabindex="-1"><abbr
                                        class="select2-search-choice-close"></abbr> <span class="select2-arrow"
                                        role="presentation"><b role="presentation"></b></span></a>
                                <label for="belonging_activity" class="select2-offscreen"></label>
                                <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true"
                                    role="button" aria-labelledby="select2-chosen-6" style="color: #000000;">
                            </div>
                            <input type="hidden" class="select2_box bk-form-input" name="belonging_activity"
                                style="display: none; color: #000000;" tabindex="-1" title="" value=""
                                id="belonging_activity">
                            <!-- select2 通过ajax end -->
                        </div>
                    </div>
                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">姓名：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <input type="text" id="apply_name" class="bk-form-input" name="apply_name"
                                placeholder="请输入您的姓名：">
                        </div>
                    </div>
                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">年龄：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <input type="text" id="apply_age" class="bk-form-input" name="apply_age"
                                placeholder="请输入您的年龄：">
                        </div>
                    </div>

                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">性别：</label>
                        <div class="bk-form-content" style="margin-left:150px;width: 430px">
                            <select name="apply_sex" id="apply_sex" class="bk-form-select">
                                <option value="1" style="color: #000000;">男</option>
                                <option value="2" style="color: #000000;">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">学校：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <input type="text" id="apply_school" class="bk-form-input" name="apply_school"
                                placeholder="请输入您的学校：">
                        </div>
                    </div>
                    <div class="bk-form-item is-required">
                        <label class="bk-label" style="width:150px;">年级：</label>
                        <div class="bk-form-content" style="margin-left:150px;width: 430px">
                            <select name="apply_grade" id="apply_grade" class="bk-form-select">
                                <option value="1" style="color: #000000;">大一</option>
                                <option value="2" style="color: #000000;">大二</option>
                                <option value="3" style="color: #000000;">大三</option>
                                <option value="4" style="color: #000000;">大四</option>
                                <option value="5" style="color: #000000;">研一</option>
                                <option value="6" style="color: #000000;">研二</option>
                                <option value="7" style="color: #000000;">研三</option>
                            </select>
                        </div>
                    </div>

                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="bk-button bk-default" data-dismiss="modal">取消</button>
                <button type="button" class="bk-button bk-primary" onclick="saveApply()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
{% endblock %}

{% block extra_block %}
<!-- <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.2.min.js"></script> -->
<script type="text/javascript" src="{{ STATIC_URL }}bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
    src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>

<script src="{{ SITE_URL }}static/datatables-1.10.7/jquery.dataTables.js"></script>
<script src="{{ SITE_URL }}static/datatables-1.10.7/dataTables.bootstrap.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>

<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>

<script>

    //表格(DataTables)
    var language = {
        search: "搜索：",
        lengthMenu: "每页显示 _MENU_ 记录",
        zeroRecords: "没找到相应的数据！",
        info: "分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条",
        infoEmpty: "暂无数据！",
        infoFiltered: "(从 _MAX_ 条数据中搜索)",
        paginate: {
            first: "首页",
            last: "尾页",
            previous: "上一页",
            next: "下一页",
        }
    }
    // 报名表
    var applyTable = $('#apply').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: false, //隐藏分页
        ordering: false, //关闭排序
        info: false, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        // lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{ SITE_URL }}get_apply_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data
                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "belonging_activity",
            },
            {
                targets: 1,
                data: "apply_name",
            },
            {
                targets: 2,
                data: "apply_age",
            },
            {
                targets: 3,
                data: "apply_sex",
            },
            {
                targets: 4,
                data: "apply_school",
            },
            {
                targets: 5,
                data: "apply_grade",
            },
            {
                targets: 6,
                data: "apply_time",
            },
            {
                targets: 7,
                data: "id",
                render: function (data, type, row, meta) {
                    return '<a class="bk-icon-button bk-warning  bk-button-mini" onclick="editApplyForm(' + data + ')" title="编辑">编辑信息</a>\n';
                }
            },
            {
                targets: 8,
                data: "apply_status",
                render: function (data, type, row, meta) {
                    if (data === "待审核") {
                        return '<span class="bk-tag is-fill bk-gray">' + data + '</span>';
                    } else if (data === "已审核") {
                        return '<span class="bk-tag is-fill bk-primary">' + data + '</span>';
                    } else if (data === "未通过") {
                        return '<span class="bk-tag is-fill bk-error">' + data + '</span>';
                    } else {
                        return '<span class="bk-tag is-fill bk-success">' + data + '</span>';
                    }
                }
            },
            {
                targets: 9,
                data: "id",
                render: function (data, type, row, meta) {
                    if (row.apply_status === "待审核") {
                        return '----------';
                    } else if (row.apply_status === "未通过") {
                        return '<a class="bk-icon-button bk-success bk-button-mini" type="button" onclick="checkNote(1, ' + data + ')" title="查看通知">查看邮件通知</a>\n';
                    } else if (row.apply_status === "已审核") {
                        return '<a class="bk-icon-button bk-success bk-button-mini" type="button" onclick="checkNote(2, ' + data + ')" title="查看通知">查看邮件通知</a>\n';
                    } else {
                        return '--';
                    }
                }

            }

        ]
    });
    setInterval(function () {
        applyTable.ajax.reload(null, false); // user paging is not reset on reload
    }, 30000);

    function checkNote(action, id){
        var dialog = new bkDialog({
            type: 'dialog',
            title: '邮件详情',
            content: action === 1 ? '很遗憾的通知您，抱歉，您的报名申请不符合条件，未通过审核。' : '恭喜您的报名申请通过发布企业审核，请您按时参加公益活动。',
       
        });
        dialog.show();
    }

    // apply_form_js_start
    $("#plugin3_demo3 .select2_box").select2({
        ajax: {
            url: "{{ SITE_URL }}get_activity_select_data/",
            cache: false,

            //对返回的数据进行处理
            results: function (data) {
                return data.data;
            }
        }

    });
    $('#validate_form_apply').validate({
        ignore: '.ignore',
        errorElement: 'div', //错误信息的容器
        errorClass: 'is-danger',
        errorPlacement: function (error, element) {
            error.addClass('bk-form-tip').insertAfter(element)
        },
        success: function (label) { //验证通过的提示图标
            label.html('<div class="bk-badge bk-success"><i class="bk-icon icon-check-1"></i></div>');
        },
        validClass: "bk-valid",
        //验证规则
        rules: {
            apply_name: {
                required: true,
            },
            apply_age: {
                required: true,
            },
            apply_sex: {
                required: true,
            },
            apply_school: {
                required: true,
            },
            apply_grade: {
                required: true,
            },
        },
        //错误提示信息
        messages: {
            apply_name: "<p class='bk-tip-text'>姓名为必填项！</p>  ",
            apply_age: "<p class='bk-tip-text'>年龄为必填项！</p>  ",
            apply_sex: "<p class='bk-tip-text'>性别为必填项！</p>  ",
            apply_school: "<p class='bk-tip-text'>学校为必填项！</p>  ",
            apply_grade: "<p class='bk-tip-text'>年级为必填项！</p>  ",
        }
    });

    // save_apply_info_js_start
    function saveApply() {
        if (!$('#s2id_autogen5').val()) {
            new bkMessage({
                message: "请选择您要报名的活动",
                theme: 'error',
                delay: 3000
            });
            return false
        }


        if ($("#validate_form_apply").valid()) {
            $.ajax({
                url: '{{ SITE_URL }}save_apply_info/',
                method: 'post',
                data: {
                    'belonging_activity': $("#s2id_autogen5").val(),
                    'apply_name': $("#apply_name").val(),
                    'apply_age': $('#apply_age').val(),
                    'apply_sex': $('#apply_sex').val(),
                    'apply_school': $('#apply_school').val(),
                    'apply_grade': $('#apply_grade').val(),
                    'apply_id': $('#apply_id').val(),
                    'csrfmiddlewaretoken': "{{ csrf_token }}",
                },

                success: function (response) {
                    if (response['result']) {
                        new bkMessage({
                            message: response['message'],
                            theme: 'success'
                        });

                        $('#applyModal').modal('hide')
                        applyTable.ajax.reload(null, false)
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                        $('#applyModal').modal('hide')
                        applyTable.ajax.reload(null, false)
                    }
                }
            })
        }
    }
    // save_apply_info_js_end
    $('#applyModal').on('hide.bs.modal', function () {
        document.getElementById("validate_form_apply").reset();
        $("#validate_form_apply").validate().resetForm();
        $("#plugin3_demo3 .select2_box").select2("val", "")
        $("#apply_name").val("");
        $("#apply_age").val("");
        $("#apply_sex").val(1);
        $("#apply_school").val("");
        $("#apply_grade").val(1);
        var active = true;
        $('#apply_id').val("");
    });
    // apply_form_js_end

    function editApplyForm(id) {

        $.ajax({
            url: '{{ SITE_URL }}get_apply_info/' + id,
            method: 'get',
            success: function (response) {
                if (response['result']) {
                    $("#applyModalLabel").text("修改奖项信息");
                    $('#applyModal').modal('show');
                    $("#apply_id").val(response.data.info.data.id);
                    $("#plugin3_demo2 .select2_box").select2('val', response.data.info.data.display_belonging_activity)
                    $("#apply_name").val(response.data.info.data.apply_name);
                    $("#apply_age").val(response.data.info.data.apply_age);
                    $("#apply_sex").val(response.data.info.data.apply_sex);
                    $("#apply_school").val(response.data.info.data.apply_school);
                    $("#apply_grade").val(response.data.info.data.apply_grade);
                } else {
                    // 失败处理
                    new bkMessage({
                        message: response['message'],
                        theme: 'error',
                        delay: 3000
                    });
                }
            }
        })

    }
</script>
{% endblock %}